<template>
  <PanelLayout>
    <div class="two-cell">
      <div class="title">电容电压</div>
      <div class="list-wrap">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="value">{{ item.value }}</div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </PanelLayout>
</template>

<script setup name="FiveCell">
import { ref } from 'vue'
import PanelLayout from '@/views/index/PanelLayout.vue'
import { randomLenNum } from '@/utils/index.js'
import useAppStore from '@/store/modules/app'
import { getIndex3Botton2drdy } from '@/api/base.js'
const appStore = useAppStore()

const list = ref([])

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据

  getIndex3Botton2drdy({ time: time }).then(res => {
    if (res.code == '0000') {
      list.value = res.data
    }
  })
  // list.value = Array.from({ length: 4 }, (e, i) => {
  //   return {
  //     title: '指标' + i,
  //     value: randomLenNum(3)
  //   }
  // })
  // console.log(list.value);
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
.two-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  .title {
    font-size: 18px;
    height: 16px;
  }
  .list-wrap {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
    .item {
      width: calc( 50% - 16px );
      height: calc( 50% - 16px );
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      .title {
        font-size: 14px;
      }
      .value {
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}
</style>
